<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 通道分类演示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Three.js 通道分类演示</h1>
            <p>在相同光源环境下展示不同通道类型的效果</p>
        </header>
        
        <nav class="controls-panel">
            <h3>通道控制</h3>
            
            <!-- 光源控制 -->
            <div class="control-section">
                <h4>光源设置</h4>
                <div class="control-group">
                    <label>环境光强度</label>
                    <input type="range" id="ambientIntensity" min="0" max="2" step="0.1" value="0.3">
                    <span id="ambientIntensityValue">0.3</span>
                </div>
                <div class="control-group">
                    <label>方向光强度</label>
                    <input type="range" id="directionalIntensity" min="0" max="3" step="0.1" value="1">
                    <span id="directionalIntensityValue">1.0</span>
                </div>
                <div class="control-group">
                    <label>点光源强度</label>
                    <input type="range" id="pointIntensity" min="0" max="2" step="0.1" value="0.5">
                    <span id="pointIntensityValue">0.5</span>
                </div>
            </div>
            
            <!-- 通道类型选择 -->
            <div class="control-section">
                <h4>通道类型</h4>
                <div class="channel-buttons">
                    <button class="channel-btn active" data-channel="diffuse">漫反射通道</button>
                    <button class="channel-btn" data-channel="normal">法线通道</button>
                    <button class="channel-btn" data-channel="roughness">粗糙度通道</button>
                    <button class="channel-btn" data-channel="metalness">金属度通道</button>
                    <button class="channel-btn" data-channel="emission">自发光通道</button>
                    <button class="channel-btn" data-channel="displacement">位移通道</button>
                    <button class="channel-btn" data-channel="occlusion">环境遮蔽通道</button>
                </div>
            </div>
            
            <!-- 材质参数 -->
            <div class="control-section">
                <h4>材质参数</h4>
                <div class="control-group">
                    <label>基础颜色</label>
                    <input type="color" id="color" value="#ffffff">
                </div>
                <div class="control-group">
                    <label>粗糙度</label>
                    <input type="range" id="roughness" min="0" max="1" step="0.01" value="0.5">
                    <span id="roughnessValue">0.5</span>
                </div>
                <div class="control-group">
                    <label>金属度</label>
                    <input type="range" id="metalness" min="0" max="1" step="0.01" value="0">
                    <span id="metalnessValue">0.0</span>
                </div>
                <div class="control-group">
                    <label>自发光强度</label>
                    <input type="range" id="emissiveIntensity" min="0" max="2" step="0.1" value="0">
                    <span id="emissiveIntensityValue">0.0</span>
                </div>
                <div class="control-group">
                    <label>法线缩放</label>
                    <input type="range" id="normalScale" min="0" max="3" step="0.1" value="1">
                    <span id="normalScaleValue">1.0</span>
                </div>
                <div class="control-group">
                    <label>位移缩放</label>
                    <input type="range" id="displacementScale" min="0" max="0.5" step="0.01" value="0.1">
                    <span id="displacementScaleValue">0.10</span>
                </div>
                <div class="control-group">
                    <label>环境遮蔽强度</label>
                    <input type="range" id="aoMapIntensity" min="0" max="2" step="0.1" value="1">
                    <span id="aoMapIntensityValue">1.0</span>
                </div>
                <button id="resetBtn">重置参数</button>
            </div>
            
            <!-- 视图控制 -->
            <div class="control-section">
                <h4>视图控制</h4>
                <div class="control-group">
                    <label>
                        <input type="checkbox" id="showWireframe">
                        显示线框
                    </label>
                </div>
                <div class="control-group">
                    <label>
                        <input type="checkbox" id="showHelpers" checked>
                        显示辅助器
                    </label>
                </div>
                <button id="resetCamera">重置相机</button>
            </div>
        </nav>
        
        <main>
            <div id="scene-container"></div>
            
            <!-- 通道信息面板 -->
            <div class="info-panel">
                <h3>通道信息</h3>
                <div id="channelInfo">
                    <div class="channel-detail active" data-channel="diffuse">
                        <h4>漫反射通道 (Diffuse/Albedo)</h4>
                        <p><strong>作用:</strong> 定义材质的基础颜色，不受光照角度影响的固有颜色</p>
                        <p><strong>特点:</strong> RGB通道存储颜色信息，是最基础的材质通道</p>
                        <p><strong>应用:</strong> 所有材质都需要漫反射通道作为基础</p>
                        <p><strong>格式:</strong> 通常使用sRGB色彩空间的纹理</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="normal">
                        <h4>法线通道 (Normal Map)</h4>
                        <p><strong>作用:</strong> 存储表面法线信息，模拟细节凹凸效果</p>
                        <p><strong>特点:</strong> RGB分别对应XYZ轴的法线方向，通常呈蓝紫色</p>
                        <p><strong>应用:</strong> 增加表面细节，提升视觉真实感</p>
                        <p><strong>格式:</strong> 线性色彩空间，范围0-1映射到-1到1</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="roughness">
                        <h4>粗糙度通道 (Roughness Map)</h4>
                        <p><strong>作用:</strong> 控制表面的粗糙程度，影响反射的锐利度</p>
                        <p><strong>特点:</strong> 灰度图，白色=粗糙，黑色=光滑</p>
                        <p><strong>应用:</strong> PBR材质的重要组成，控制镜面反射</p>
                        <p><strong>格式:</strong> 单通道灰度图，线性色彩空间</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="metalness">
                        <h4>金属度通道 (Metalness Map)</h4>
                        <p><strong>作用:</strong> 定义材质的金属特性，影响反射行为</p>
                        <p><strong>特点:</strong> 二进制特性，通常为0(非金属)或1(金属)</p>
                        <p><strong>应用:</strong> PBR工作流中区分金属和非金属材质</p>
                        <p><strong>格式:</strong> 单通道灰度图，线性色彩空间</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="emission">
                        <h4>自发光通道 (Emission Map)</h4>
                        <p><strong>作用:</strong> 定义材质自身发光的颜色和强度</p>
                        <p><strong>特点:</strong> 不受光照影响，可以照亮周围环境</p>
                        <p><strong>应用:</strong> 屏幕、霓虹灯、发光标识等效果</p>
                        <p><strong>格式:</strong> RGB颜色通道，可以超出0-1范围</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="displacement">
                        <h4>位移通道 (Displacement Map)</h4>
                        <p><strong>作用:</strong> 实际改变几何体顶点位置，创建真实凹凸</p>
                        <p><strong>特点:</strong> 需要足够的几何密度才能显示效果</p>
                        <p><strong>应用:</strong> 地形、岩石、砖墙等需要真实几何变化的表面</p>
                        <p><strong>格式:</strong> 单通道灰度图，线性色彩空间</p>
                    </div>
                    
                    <div class="channel-detail" data-channel="occlusion">
                        <h4>环境遮蔽通道 (AO Map)</h4>
                        <p><strong>作用:</strong> 模拟环境光被遮挡的区域，增加深度感</p>
                        <p><strong>特点:</strong> 灰度图，黑色区域表示被遮挡的凹陷部分</p>
                        <p><strong>应用:</strong> 增强材质的立体感和真实感</p>
                        <p><strong>格式:</strong> 单通道灰度图，通常与漫反射相乘</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- Three.js 导入映射 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../three.js/build/three.module.js",
                "three/addons/": "../three.js/examples/jsm/"
            }
        }
    </script>
    <script src="main.js" type="module"></script>
</body>
</html>